<template>
    <view class="uni-data-pickerview">
        <scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true">
            <view class="selected-list">
                <view
                    class="selected-item"
                    v-for="(item, index) in selected"
                    :key="index"
                    :class="{
                        'selected-item-active': index == selectedIndex
                    }"
                    @click="handleSelect(index)"
                >
                    <text>{{ item.text || 'ssss' }}</text>
                </view>
            </view>
        </scroll-view>
        <view class="tab-c">
            <scroll-view class="list" :scroll-y="true">
                <view
                    class="item"
                    :class="{ 'is-disabled': !!item.disable }"
                    v-for="(item, j) in dataList[selectedIndex]"
                    :key="j"
                    @click="handleNodeClick(item, selectedIndex, j)"
                >
                    <text class="item-text">{{ item[map.text] }}</text>
                    <view class="check" v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value"></view>
                </view>
            </scroll-view>

            <view class="loading-cover" v-if="loading">
                <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
            </view>
            <view class="error-message" v-if="errorMessage">
                <text class="error-text">{{ errorMessage }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import dataPicker from './uni-data-picker.js';

/**
 * DataPickerview
 * @description uni-data-pickerview
 * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
 * @property {Array} localdata 本地数据，参考
 * @property {Boolean} step-searh = [true|false] 是否分布查询
 * @value true 启用分布查询，仅查询当前选中节点
 * @value false 关闭分布查询，一次查询出所有数据
 * @property {String|DBFieldString} self-field 分布查询当前字段名称
 * @property {String|DBFieldString} parent-field 分布查询父字段名称
 * @property {String|DBCollectionString} collection 表名
 * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
 * @property {String} orderby 排序字段及正序倒叙设置
 * @property {String|JQLString} where 查询条件
 */
export default {
    name: 'UniDataPickerView',
    emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
    mixins: [dataPicker],
    props: {
        managedMode: {
            type: Boolean,
            default: false
        },
        ellipsis: {
            type: Boolean,
            default: true
        }
    },
    created() {
        if (!this.managedMode) {
            this.$nextTick(() => {
                this.loadData();
            });
        }
    },
    methods: {
        onPropsChange() {
            this._treeData = [];
            this.selectedIndex = 0;
            this.$nextTick(() => {
                this.loadData();
            });
        },
        handleSelect(index) {
            this.selectedIndex = index;
        },
        handleNodeClick(item, i, j) {
            if (item.disable) {
                return;
            }

            const node = this.dataList[i][j];
            const text = node[this.map.text];
            const value = node[this.map.value];

            if (i < this.selected.length - 1) {
                this.selected.splice(i, this.selected.length - i);
                this.selected.push({
                    text,
                    value
                });
            } else if (i === this.selected.length - 1) {
                this.selected.splice(i, 1, {
                    text,
                    value
                });
            }

            if (node.isleaf) {
                this.onSelectedChange(node, node.isleaf);
                return;
            }

            const { isleaf, hasNodes } = this._updateBindData();

            // 本地数据
            if (this.isLocalData) {
                this.onSelectedChange(node, !hasNodes || isleaf);
            } else if (this.isCloudDataList) {
                // Cloud 数据 (单列)
                this.onSelectedChange(node, true);
            } else if (this.isCloudDataTree) {
                // Cloud 数据 (树形)
                if (isleaf) {
                    this.onSelectedChange(node, node.isleaf);
                } else if (!hasNodes) {
                    // 请求一次服务器以确定是否为叶子节点
                    this.loadCloudDataNode((data) => {
                        if (!data.length) {
                            node.isleaf = true;
                        } else {
                            this._treeData.push(...data);
                            this._updateBindData(node);
                        }
                        this.onSelectedChange(node, node.isleaf);
                    });
                }
            }
        },
        updateData(data) {
            this._treeData = data.treeData;
            this.selected = data.selected;
            if (!this._treeData.length) {
                this.loadData();
            } else {
                //this.selected = data.selected
                this._updateBindData();
            }
        },
        onDataChange() {
            this.$emit('datachange');
        },
        onSelectedChange(node, isleaf) {
            if (isleaf) {
                this._dispatchEvent();
            }

            if (node) {
                this.$emit('nodeclick', node);
            }
        },
        _dispatchEvent() {
            this.$emit('change', this.selected.slice(0));
        }
    }
};
</script>

<style lang="scss">
$uni-primary: #007aff !default;

.uni-data-pickerview {
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.error-text {
    color: #dd524d;
}

.loading-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.5);
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    z-index: 1001;
}

.load-more {
    /* #ifndef APP-NVUE */
    margin: auto;
    /* #endif */
}

.error-message {
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    opacity: 0.9;
    z-index: 102;
}

/* #ifdef APP-NVUE */
.selected-area {
    width: 750rpx;
}
/* #endif */

.selected-list {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-wrap: nowrap;
    /* #endif */
    flex-direction: row;
    padding: 0 5px;
    border-bottom: 1px solid #f8f8f8;
}

.selected-item {
    margin-left: 10px;
    margin-right: 10px;
    padding: 12px 0;
    text-align: center;
    /* #ifndef APP-NVUE */
    white-space: nowrap;
    /* #endif */
}

.selected-item-text-overflow {
    width: 168px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 6em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
}

.selected-item-active {
    border-bottom: 2px solid $uni-primary;
}

.selected-item-text {
    color: $uni-primary;
}

.tab-c {
    position: relative;
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    overflow: hidden;
}

.list {
    flex: 1;
}

.item {
    padding: 12px 15px;
    /* border-bottom: 1px solid #f0f0f0; */
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
}

.is-disabled {
    opacity: 0.5;
}

.item-text {
    /* flex: 1; */
    color: #333333;
}

.item-text-overflow {
    width: 280px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 20em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
}

.check {
    margin-right: 5px;
    border: 2px solid $uni-primary;
    border-left: 0;
    border-top: 0;
    height: 12px;
    width: 6px;
    transform-origin: center;
    /* #ifndef APP-NVUE */
    transition: all 0.3s;
    /* #endif */
    transform: rotate(45deg);
}
</style>
